/**
 * 功能描述: 基础开关组件样式
 * @author 赵常畅
 * @date 2022/9/20 19:23
 * @version 1.0
 */

@import "../../style/index";
@import "./switchConstant";

// 基础开关
@mixin switch--layout {
  // 布局
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  min-width: $--switch-min-width;
  height: $--switch-height;
  line-height: $--switch-line-height;
  // 非禁用时激活样式
  &:not(.#{$namespace}-switch-disabled):active {
    // 按钮内实心圆
    @include b(switch-handle) {
      &::before {
        right: $--switch-position-offset;
        left: $--switch-position-offset-zero;
      }
    }
    // 选中时
    &.#{$namespace}-switch-checked {
      // 按钮内实心圆
      @include b(switch-handle) {
        &::before {
          right: $--switch-position-offset-zero;
          left: $--switch-position-offset;
        }
      }
    }
  }
}
@include b(switch) {
  // 样式
  color: $--switch-font-color;
  font-size: $--switch-font-size;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: 'tnum';
  vertical-align: middle;
  background-color: $--switch-background-color;
  border: $--switch-border;
  border-radius: $--switch-border-radius;
  cursor: pointer;
  transition: $--switch-transition;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  // 获取焦点
  &:focus {
    outline: 0;
    box-shadow: $--switch-focus-box-shadow;
    // 鼠标悬浮
    &:hover {
      box-shadow: $--switch-hover-box-shadow;
    }
  }
  // 引入布局
  @include switch--layout;
}

// 开关开启
@mixin switch-checked--layout {
  // 布局
  // 开关内
  @include b(switch-inner) {
    margin: 0 25px 0 7px;
  }
  // 按钮内实心圆
  @include b(switch-handle) {
    left: calc(100% - 18px - 2px);
  }
}
@include b(switch-checked) {
  // 样式
  background-color: $--switch-checked-background-color;
  // 鼠标悬浮
  &:focus {
    box-shadow: $--switch-checked-focus-box-shadow;
  }
  // 引入布局
  @include switch-checked--layout;
}

// 禁用开关
@include b(switch-disabled) {
  cursor: not-allowed;
  opacity: 0.4;
  // 开关内所有元素
  * {
    box-shadow: none;
    cursor: not-allowed;
  }
}

// 开关内
@mixin switch-inner--layout {
  // 布局
  margin: 0 7px 0 25px;
  display: block;
}
@include b(switch-inner) {
  // 样式
  color: $--switch-inner-font-color;
  font-size: $--switch-inner-font-size;
  transition: $--switch-inner-transition;
  // 引入布局
  @include switch-inner--layout;
}

// 开关内 实心圆
@mixin switch-handle--layout {
  // 布局
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  // 实心圆
  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
@include b(switch-handle) {
  // 样式
  transition: $--switch-handle-transition;
  // 实心圆
  &::before {
    background-color: $--switch-handle-before-background-color;
    border-radius: $--switch-handle-before-border-radius;
    box-shadow: $--switch-handle-before-box-shadow;
    transition: $--switch-handle-before-transition;
    content: '';
  }
  // 引入布局
  @include switch-handle--layout;
}

// small开关
@mixin switch-small--layout {
  // 布局
  min-width: $--switch-small-min-width;
  height: $--switch-small-min-height;
  line-height: $--switch-small-min-width;
  // 按钮内实心圆
  @include b(switch-handle) {
    width: 12px;
    height: 12px;
  }
  // 开关内容
  @include b(switch-inner) {
    margin: 0 5px 0 18px;
  }
  // 开启开关
  &.#{$namespace}-switch-checked {
    // 开关内容
    @include b(switch-inner) {
      margin: 0 18px 0 5px;
    }
    // 按钮内实心圆
    @include b(switch-handle) {
      left: calc(100% - 12px - 2px);
    }
  }
}
@include b(switch-small) {
  // 样式
  @include b(switch-inner) {
    font-size: $--switch-small-inner-font-size;
  }
  // 引入布局
  @include switch-small--layout;
}